<template>
  <div class="add_hospital_page">
    <div class="nav_bar">
      <div class="back" @click="goBack">
        <span class="el-icon-arrow-left"></span>
        <span>返回</span>
      </div>

      <div class="top_menus">
        <div
          class="menu_cell"
          :class="step == item.id ? 'menu_cell_active' : ''"
          v-for="(item, index) in menus"
          :key="index"
          @click="menuEvent(item)"
        >
          {{ item.name }}
        </div>
      </div>
    </div>

    <!-- 第一步 基础信息 开始 -->
    <div class="content" v-show="step == 1">
      <el-form
        ref="addForm"
        :model="addForm"
        class=""
        :rules="addFormRules"
        size="small"
        :label-width="labelWidth"
      >
        <el-form-item label="评论人头像：">
          <ImageUpload v-model="addForm.reviewerAvatar"></ImageUpload>
        </el-form-item>
        <el-form-item label="评论人：" prop="reviewer">
          <el-input v-model.trim="addForm.reviewer"></el-input>
        </el-form-item>
        <el-form-item label="手机号码：" prop="reviewerPhone">
          <el-input
            v-model.trim="addForm.reviewerPhone"
            maxlength="11"
          ></el-input>
        </el-form-item>
        <el-form-item label="所属平台：" prop="platform">
          <!-- <project-select v-model="addForm.platform" :multiple="false"></project-select> -->
          <PlatformSelect v-model="addForm.platform"></PlatformSelect>
        </el-form-item>
        <el-form-item label="评论医院：" prop="hospitalId">
          <!-- <project-select v-model="addForm.hospitalId" :multiple="false"></project-select> -->
          <hospital-select
            v-model="addForm.hospitalId"
            @change="changeHospital"
          ></hospital-select>
        </el-form-item>
        <el-form-item label="评论医生：" prop="doctorId">
          <!-- <project-select v-model="addForm.doctorId" :multiple="false"></project-select> -->
          <!-- <DoctorSelect v-model="addForm.doctorId"></DoctorSelect> -->
          <el-select v-model="addForm.doctorId" filterable clearable>
            <el-option
              v-for="(item, index) in doctorList"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="评论商品：" prop="goodsId">
          <!-- <GoodsSelect v-model="addForm.goodsId"></GoodsSelect> -->
          <el-select v-model="addForm.goodsId" filterable clearable>
            <el-option
              v-for="(item, index) in goodsList"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="评分：" class="is-required">
          <el-form-item label="" label-width="0" prop="scoreOverall">
            <div class="rate_box">
              <span class="name">总体</span>
              <el-rate
                v-model="addForm.scoreOverall"
                @change="(e) => changeRate(e, 'scoreOverall')"
              ></el-rate>
              <span class="txt">{{ showRateText(addForm.scoreOverall) }}</span>
            </div>
          </el-form-item>
          <el-form-item label="" label-width="0" prop="scoreProfessional">
            <div class="rate_box">
              <span class="name">专业</span>
              <el-rate
                v-model="addForm.scoreProfessional"
                @change="(e) => changeRate(e, 'scoreProfessional')"
              ></el-rate>
              <span class="txt">{{
                showRateText(addForm.scoreProfessional)
              }}</span>
            </div>
          </el-form-item>
          <el-form-item label="" label-width="0" prop="scoreService">
            <div class="rate_box">
              <span class="name">服务</span>
              <el-rate
                v-model="addForm.scoreService"
                @change="(e) => changeRate(e, 'scoreService')"
              ></el-rate>
              <span class="txt">{{ showRateText(addForm.scoreService) }}</span>
            </div>
          </el-form-item>
          <el-form-item label="" label-width="0" prop="scoreSurroundings">
            <div class="rate_box">
              <span class="name">环境</span>
              <el-rate
                v-model="addForm.scoreSurroundings"
                @change="(e) => changeRate(e, 'scoreSurroundings')"
              ></el-rate>
              <span class="txt">{{
                showRateText(addForm.scoreSurroundings)
              }}</span>
            </div>
          </el-form-item>
        </el-form-item>
        <el-form-item label="评论图片：" prop="sellPrice">
          <ImageUpload v-model="addForm.commentPics" :limit="5"></ImageUpload>
        </el-form-item>
        <el-form-item label="消费凭证：">
          <ImageUpload v-model="addForm.voucherPics" :limit="5"></ImageUpload>
        </el-form-item>
        <el-form-item label="评论内容：">
          <el-input
            type="textarea"
            v-model.trim="addForm.content"
            rows="5"
            resize="none"
          ></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="saveInfo">保存，下一步</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 第一步 基础信息 end -->

    <!-- 第二步 平台运营 开始 -->
    <div class="content" v-show="step == 2">
      <el-form
        ref="secondForm"
        :rules="secondFormRules"
        :model="addForm"
        class=""
        size="small"
        :label-width="labelWidth"
      >
        <el-form-item label="上架状态：" class="" prop="onShelf">
          <el-radio-group v-model="addForm.onShelf">
            <el-radio :label="1">上架</el-radio>
            <el-radio :label="2">下架可见</el-radio>
            <el-radio :label="0">下架不可见</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="排序时间：" class="" prop="orderTime">
          <el-date-picker
            v-model="addForm.orderTime"
            type="date"
            class="a_input"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="" class="long_form_item">
          <el-button type="primary" :loading="loading" @click="updateInfo"
            >保存</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- 第二步 平台运营 end -->
  </div>
</template>
<script>
import ImageUpload from "@/components/upload/index.vue";
import WangEditor from "@/components/wangEditor/index.vue";
//import ChooseHospital from "./hospital.vue";
import GoodsHospital from "@/components/hospital/hospital.vue";
import PlatformSelect from "@/components/select/platform.vue";
import DoctorSelect from "@/components/select/doctor.vue";
import GoodsSelect from "@/components/select/goods.vue";
import {
  BASEURL,
  ADD_COMMENT_INFO,
  EDIT_COMMENT_INFO,
  GET_COMMENT_INFO,
} from "@/http/consumer";
import { GET_DOCTOR_OPTIONS } from "@/http/doctor";
import { GET_GOODS_OPTIONS } from "@/http/goods";
import { deepClone, showToast } from "@/common/util";
import { PHONE_VALIDATOR, CHECK_MAX_MIN } from "@/common/validator";
export default {
  components: {
    ImageUpload,
    WangEditor,
    GoodsHospital,
    PlatformSelect,
    DoctorSelect,
    GoodsSelect,
  },
  data() {
    return {
      menus: [
        { name: "基础信息", id: 1 },
        { name: "平台运营", id: 2 },
      ],
      step: 1,
      addForm: {},
      labelWidth: "120px",
      showHospital: false,
      addFormRules: {
        reviewer: [
          { required: true, message: "请输入评论人", trigger: "blur" },
        ],
        reviewerPhone: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          { validator: PHONE_VALIDATOR, trigger: "blur" },
        ],
        platform: [
          { required: true, message: "请选择所属平台", trigger: "change" },
        ],
        hospitalId: [
          { required: true, message: "请选择评论医院", trigger: "change" },
        ],
        scoreOverall: [
          { required: true, message: "请选择总体评分", trigger: "change" },
          { validator: CHECK_MAX_MIN, trigger: "change" },
        ],
        scoreProfessional: [{ validator: CHECK_MAX_MIN, trigger: "change" }],
        scoreService: [{ validator: CHECK_MAX_MIN, trigger: "change" }],
        scoreSurroundings: [{ validator: CHECK_MAX_MIN, trigger: "change" }],
      },
      secondFormRules: {
        onShelf: [
          { required: true, message: "请选择上架状态", trigger: "change" },
        ],
        orderTime: [
          { required: true, message: "请输入排序时间", trigger: "blur" },
        ],
      },
      hospitalList: [],
      loading: false,
      doctorList: [],
      goodsList: [],
    };
  },
  created() {
    let query = this.$route.query;
    if (query.id) {
      this.getInfo(query.id);
    }
    this.getDoctor();
    this.getGoods();
  },
  methods: {
    // 菜单点击事件
    menuEvent(row) {
      if (this.step == 1) {
        this.$refs.addForm.validate((valid) => {
          if (!valid) {
            return false;
          }
          //this.step = 2;
          this.saveInfo();
        });
        return false;
      }
      this.step = row.id;
    },

    // 返回上一页
    goBack() {
      this.$router.go("-1");
    },

    // 打开医院选择框
    openDialog() {
      this.showHospital = true;
    },

    // 下一步
    nextStep() {
      this.$refs.addForm.validate((valid) => {
        if (!valid) {
          return false;
        }
        this.step = 2;
      });
    },

    // 获取商品详情
    getInfo(id) {
      let oParams = {};
      oParams.id = id;
      GET_COMMENT_INFO(oParams).then((res) => {
        let obj = res.data || {};

        // 评论头像
        if (obj.reviewerAvatar) {
          let reviewerAvatar = [
            {
              name: obj.reviewerAvatar,
              url: BASEURL + obj.reviewerAvatar,
              path: obj.reviewerAvatar,
            },
          ];
          obj.reviewerAvatar = reviewerAvatar;
        }

        // 评论图片
        if (obj.commentPics && obj.commentPics.length) {
          let commentPics = [];
          obj.commentPics.map((k) => {
            commentPics.push({
              name: k,
              url: BASEURL + k,
              path: k,
            });
          });
          obj.commentPics = commentPics;
        }

        // 消费凭证
        if (obj.voucherPics && obj.voucherPics.length) {
          let voucherPics = [];
          obj.voucherPics.map((k) => {
            voucherPics.push({
              name: k,
              url: BASEURL + k,
              path: k,
            });
          });
          obj.voucherPics = voucherPics;
        }

        this.addForm = obj;
      });
    },

    // 获取参数
    getParams() {
      let o = deepClone(this.addForm);

      // 评论头像
      if (o.reviewerAvatar) {
        let reviewerAvatar = [];
        o.reviewerAvatar.map((k) => {
          reviewerAvatar.push(k.path);
        });
        o.reviewerAvatar = reviewerAvatar.toString();
      }

      // 评论图片
      if (o.commentPics) {
        let commentPics = [];
        o.commentPics.map((k) => {
          commentPics.push(k.path);
        });
        o.commentPics = commentPics;
      }

      // 消费凭证
      if (o.voucherPics) {
        let voucherPics = [];
        o.voucherPics.map((k) => {
          voucherPics.push(k.path);
        });
        o.voucherPics = voucherPics;
      }

      return o;
    },

    // 发送请求、保存数据
    updateInfo() {
      let _this = this;
      let query = _this.$route.query;
      let oParams = _this.getParams();
      let callBack = ADD_COMMENT_INFO;
      let msg = "保存成功";
      this.$refs.secondForm.validate((valid) => {
        if (!valid) {
          return false;
        }
        _this.loading = true;
        // 编辑
        if (oParams.id) {
          //oParams.id = query.id;
          callBack = EDIT_COMMENT_INFO;
        }

        // 新增
        callBack(oParams).then((res) => {
          _this.loading = false;
          if (res.code == 200) {
            showToast({
              message: msg,
              type: "success",
            });
            _this.goBack();
          }
        });
      });
      console.log(oParams);
    },

    // 保存信息
    saveInfo() {
      let _this = this;
      let query = _this.$route.query;
      this.$refs.addForm.validate((valid) => {
        if (!valid) {
          return false;
        }
        let oParams = _this.getParams();
        let callBack = ADD_COMMENT_INFO;
        console.log(oParams);
        _this.loading = true;

        // 编辑
        if (query.id) {
          oParams.id = query.id;
          callBack = EDIT_COMMENT_INFO;
        }

        // 新增
        callBack(oParams).then((res) => {
          _this.loading = false;
          if (res.code == 200) {
            showToast({
              message: "保存成功",
              type: "success",
            });
            let obj = res.data || {};
            // _this.goBack()
            _this.step = 2;
            _this.$set(_this.addForm, "id", obj.id);
          }
        });
      });
    },

    // 展示评分
    showRateText(num) {
      if (!num) {
        return "";
      }

      if (num <= 2) {
        return "很差";
      }

      if (num > 2 && num <= 3) {
        return "一般";
      }

      if (num > 3 && num <= 4) {
        return "较好";
      }

      if (num > 4 && num <= 5) {
        return "很赞";
      }
    },

    // 获取医生
    getDoctor(code) {
      let oParams = {};
      if (code) {
        oParams.hospitalId = code;
      }
      GET_DOCTOR_OPTIONS(oParams).then((res) => {
        this.doctorList = res.data || [];
      });
    },

    // 获取商品
    getGoods(code) {
      let oParams = {};
      if (code) {
        oParams.hospitalId = code;
      }
      GET_GOODS_OPTIONS(oParams).then((res) => {
        this.goodsList = res.data || [];
      });
    },

    // 选择医院
    changeHospital(e) {
      console.log(e);
      let o = this.addForm;
      if (o.goodsId) {
        delete o.goodsId;
      }
      if (o.doctorId) {
        delete o.doctorId;
      }
      this.getDoctor(e);
      this.getGoods(e);
    },

    // 监听评分
    changeRate(e, id) {
      this.$refs.addForm.clearValidate(id);
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/style/addHospital.scss";

.rate_box {
  display: flex;
  align-items: center;

  .txt {
    color: #999;
    margin: 0 0 0 10px;
  }

  .name {
    margin: 0 10px 0 0;
  }
}
</style>